<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ecoast</title>
<!--bootstrap.min.css-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--animate.css-->
<link rel="stylesheet" href="css/animate.min.css">
<!--fontawesome 5-->
<link rel="stylesheet" href="css/all.min.css">
<!--slicknav.css-->
<link rel="stylesheet" href="css/slicknav.min.css">
<!--slickslider.css-->
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
<!-- lity.css -->
<link rel="stylesheet" href="css/lity.min.css">
<!-- flaticon.css -->
<link rel="stylesheet" href="fonts/flaticon.css">
<!--Fav-icon-->
<link rel="shortcut icon" href="images/fav-icon.png" type="image/x-icon">
<!-- Custom.css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
</head>

<body>
	<!-- Preloader -->
	<div id="preloader"></div>
	<!-- Start-Header-Section -->
	<!-- Menu-start-area -->
	<header>
		<div class="topbar">
			<div class="container">
				<div class="row">
					<div class="col-lg-9 col-md-12">
						<div class="top-info">
							<ul>
								<li>Welcome to giant</li>
								<li><i class="fas fa-phone-alt"></i>+91-1234567890</li>
								<li><i class="fas fa-envelope"></i>support@companyname.com</li>
							</ul>
						</div>
					</div>
					<div class="col-lg-3 col-md-4">
						<div class="top-socail">
							<ul>
								<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
								<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
								<li><a href="#" class="active"><i
										class="fab fa-twitter"></i></a></li>
								<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
								<li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="mid-bar">
			<div class="container">
				<div class="row">
					<!--logo-->
					<div class="col-lg-2 col-md-3 col-sm-4">
						<a href="/wk1un10/B/pro?method=pro"><img src="images/logo.png"
							alt="" class="logo"></a>
					</div>
					<!--Search-Bar-->
					<div class="col-lg-6 col-md-7 col-sm-8">
						<div class="nav-serch">
							<form class="serch-bar">
								<!--分类--->
								<select class="search-categorie" name="cars">
									<option value="volvo">所有类别</option>
									<c:forEach items="${proclass}" var="pro">



										<option value="${pro.className} "><ahref="	Product.jsp"> ${pro.className}</a>
										</option>
									</c:forEach>

								</select> <input type="search" class="search-bg" name="search"
									placeholder="Search..."> <a href="#" class="submit-btn"><i
									class="fas fa-search"></i></a>
							</form>
						</div>
					</div>
					<!--login-->
					<div class="col-lg-2 col-md-1 col-sm-1">
						<div class="login">
							<div class="header-icon">
								<a href="login.html"><i class="flaticon-icon-126486"></i></a>
							</div>
							<div class="header-content">
								<p>
									<a href="/wk1un10/B/UserName?userName=${user.userName}">${USER_SESSION.userName}</a>
								</p>
								<h5>
									<a href=""> 你的账户 </a>
								</h5>
							</div>
						</div>
					</div>
					<!--Cart-->
					<div class="col-lg-2 col-md-1 col-sm-1">
						<div class="login">
							<div class="header-icon">
								<a href="my-cart.html"><i class="flaticon-icon-1008010"></i></a>
							</div>
							<div class="header-content">
								<p>你的购物车</p>
								<h5>
									<a href="my-cart.html">5 Items in cart</a>
								</h5>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--Nav-Bar-->
		<div class="header-fixed header-one">
			<div class="container">
				<div class="row">
					<div class="col-lg-9">
						<nav class="navbar navbar-expand-lg navbar-light">
							<div class="collapse navbar-collapse my-lg-0" id="navbarNav">
								<ul class="navbar-nav mr-auto text-left">
									<li class="nav-item active"><a class="nav-link scroll"
										href="/wk1un10/B/pro?method=pro">家</a></li>
									<li class="nav-item"><a class="nav-link scroll"
										href="/wk1un10/B/product?method=product">店</a></li>
									<li class="nav-item"><a class="nav-link scroll"
										href="about-us.html">关于我们</a></li>
									<li class="nav-item"><a class="nav-link scroll" href="#">页数</a>
										<ul class="dropdown">
											<li class="nav-item"><a class="nav-link scroll"
												href="my-cart.html">我的购物车</a></li>
											<li class="nav-item"><a class="nav-link scroll"
												href="check-out.html">查看</a></li>
											<li class="nav-item"><a class="nav-link scroll"
												href="order-history.html">订单历史</a></li>
											<li class="nav-item"><a class="nav-link scroll"
												href="shop-side-bar.html">带侧栏购物</a></li>
											<li class="nav-item"><a class="nav-link scroll"
												href="tracking.html">追踪</a></li>
											<li class="nav-item"><a class="nav-link scroll"
												href="product-detail.html">产品信息</a></li>
										</ul></li>
									<li class="nav-item"><a class="nav-link scroll" href="#">分类</a>
										<ul class="dropdown">
<!-- 商品分类    	<a href="/wk1un10/B/ProductCate?proName=${p.proName}">${p.proName}</a> -->
											<c:forEach items="${proclass}" var="pro">
												<li class="nav-item"><a class="nav-link scroll"
													href="/wk1un10/B/ProducFenlei?className=${pro.className}">${pro.className}</a></li>
											</c:forEach>

										</ul></li>
									<li class="nav-item"><a class="nav-link scroll"
										href="contact-us.html">联系我们</a></li>
								</ul>
							</div>
						</nav>
					</div>
					<div class="col-lg-3">
						<!--login-->
						<div class="login-2">
							<div class="header-icon">
								<a href="login.html"><i class="flaticon-icon-126486"></i></a> <a
									href="my-cart.html"><i class="flaticon-icon-1008010"></i></a>
							</div>
						</div>
						<div class="selec-lang text-right">
							<div class="lang-drop eng">
								<!-- <select>
										<option value="USD" class="option-bg">USD</option>
										<option value="INR">INR</option>
										<option value="UAE">UAE</option>
									</select> -->
								<a href="${pageContext.request.contextPath}/logouta"
									class="login-out">退出登录</a>
							</div>
							<div class="lang-drop">
								<select>
									<option value="English">English</option>
									<option value="Hindi">Hindi</option>
									<option value="French">French</option>
								</select>
							</div>
						</div>
					</div>
					<div class="mobile-menu" data-logo="images/logo.png"></div>
				</div>
			</div>
		</div>
	</header>
	<!---Start-main-section-->
	<!--<main class="main-div">
        <div class="hero-slider-content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7 col-md-10">
                        <div class="slider-content">
                            <h4>Check Out Our Latest</h4>
                            <h2>FASHION SALE</h2>
                            <p>Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero.</p>
                            <a href="#" class="slider-btn">Shop Now<i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="slider-img">
                        <img src="images/slider-img.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </main>-->
	<section class="ws-section-spacing deal-bg">
		<div class="container">
			<div class="row">
				<div class="deal one-time">
					<!--item   轮播图-->
					<c:forEach items="${Rot}" var="r">

						<div class="deal-Banner">
							<div class="row">
								<div class="col-lg-8 col-md-12">
									<div class="deal-banner-content">
										<h4>当天交易</h4>
										<h3>享受30%优惠</h3>
										<p>Aenean imperdiet. Etiam ultricies nisi vel augue.
											Curabitur ullam corper ultricies nisi. Nam eget dui. Etiam
											rhoncus.</p>
										<a class="btn-6" href="#">去购物</a>
									</div>
								</div>
								<div class="col-md-4 col-md-4" style="text-align: center;">

									<div class="deal-img">
										<img src="${r.rotPicture}" alt="" style="text-align: center;">
									</div>

								</div>
							</div>
						</div>
					</c:forEach>
					<!--item-->

					<!--item-->

				</div>
			</div>
		</div>
	</section>
	<!---End-Main-section-->
	<!---Start-Trending-Product-section-->
	<section class="ws-section-spacing">
		<div class="container">
			<div class="row">
				<!--item-->
				<div class="col-lg-4 col-md-6">
					<div class="feature-img">
						<div class="img-content">
							<i class="flaticon-shipped"></i>
							<h4>满 $500减$100</h4>
							<p>
								<!---->
							</p>
						</div>
					</div>
				</div>
				<!--item-->
				<div class="col-lg-4 col-md-6">
					<div class="feature-img">
						<div class="img-content">
							<i class="flaticon-shipped"></i>
							<h4>活动场次</h4>
							<p></p>
						</div>
					</div>
				</div>
				<!--item-->
				<div class="col-lg-4 col-md-6">
					<div class="feature-img space">
						<div class="img-content">
							<i class="flaticon-shipped"></i>
							<h4>活动场次</h4>
							<p></p>
						</div>
					</div>
				</div>
			</div>
			<!---Tranding products-->
			<div class="row">
				<div class="col-lg-12">
					<h3 class="title">热销产品</h3>
					<div class="saprater bottom-spacing">
						<ul>
							<li class="saprater-box"></li>
							<li class="saprater-box"></li>
							<li class="saprater-box"></li>
						</ul>
					</div>
				</div>
			</div>
			<!--item-->
			<div class="row">
				<div class="product-slider">
					<div class="product-card-bg">
						<div class="product-bg">
							<a href="#"><img src="images/t1.png" alt=""></a>
						</div>
						<div class="product-content">
							<h5>
								<a href="">Product Name</a>
							</h5>
							<p>Product Type Discription</p>
							<h4 class="price-text">$200</h4>
						</div>
					</div>
					<!--item-->
					<div class="product-card-bg">
						<div class="product-bg">
							<a href="#"><img src="images/p4.png" alt=""></a>
						</div>
						<div class="product-content">
							<h5>
								<a href="product-detail.html">Product Name</a>
							</h5>
							<p>Product Type Discription</p>
							<h4 class="price-text">$200</h4>
						</div>
					</div>
					<!--item-->
					<div class="product-card-bg">
						<div class="product-bg">
							<a href="#"><img src="images/s1.png" alt=""></a>
						</div>
						<div class="product-content">
							<h5>
								<a href="product-detail.html">Product Name</a>
							</h5>
							<p>Product Type Discription</p>
							<h4 class="price-text">$200</h4>
						</div>
					</div>
					<!--item-->
					<div class="product-card-bg">
						<div class="product-bg">
							<a href="#"><img src="images/t2.png" alt=""></a>
						</div>
						<div class="product-content">
							<h5>
								<a href="product-detail.html">Product Name</a>
							</h5>
							<p>Product Type Discription</p>
							<h4 class="price-text">$200</h4>
						</div>
					</div>
					<!--item-->
					<div class="product-card-bg">
						<div class="product-bg">
							<a href="#"><img src="images/t4.png" alt=""></a>
						</div>
						<div class="product-content">
							<h5>
								<a href="product-detail.html">Product Name</a>
							</h5>
							<p>Product Type Discription</p>
							<h4 class="price-text">$200</h4>
						</div>
					</div>
					<!--item-->
					<div class="product-card-bg">
						<div class="product-bg">
							<a href="#"><img src="images/t2.png" alt=""></a>
						</div>
						<div class="product-content">
							<h5>
								<a href="product-detail.html">Product Name</a>
							</h5>
							<p>Product Type Discription</p>
							<h4 class="price-text">$200</h4>
						</div>
					</div>
					<!--item-->
					<div class="product-card-bg">
						<div class="product-bg">
							<a href="#"><img src="images/t4.png" alt=""></a>
						</div>
						<div class="product-content">
							<h5>
								<a href="product-detail.html">Product Name</a>
							</h5>
							<p>Product Type Discription</p>
							<h4 class="price-text">$200</h4>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!---End-Trending-Product-Section-->
	<!---Start-Offer-Banner-Section-->

	<!--折扣专区-->
	<section class="ws-section-spacing banner-bg">
		<div class="container">
			<div class="row">
				<div class="col-lg-7 col-md-10 col-sm-12">
					<div class="banner-content">
						<h2>Get 50% Discount On</h2>
						<h1>ADV 3</h1>
						<p>产品简介</p>
						<a class="btn-6" href="#">现在去购物</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!---End-Offer-Banner-Section-->
	<!---Start-NewArrivals-Section-->
	<section class="ws-section-spacing">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<h3 class="title">部分商品展示</h3>
					<div class="saprater title-bottom-spacing">
						<ul>
							<li class="saprater-box"></li>
							<li class="saprater-box"></li>
							<li class="saprater-box"></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="row align-items-center">
				<!--item-->
				<c:forEach items="${product}" var="p">


					<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
						<div class="product-card">
							<div class="product-bg">
								<a href="/wk1un10/B/ProductCate?proName=${p.picture}"><img
									src="${p.picture}" alt=""></a>
							</div>
							<div class="product-content">
								<h5>
									<a href="/wk1un10/B/ProductCate?proName=${p.proName}">${p.proName}</a>
								</h5>
								<p>Product Type Discription</p>
								<h4 class="price-text">$ ${p.price}</h4>
							</div>
						</div>
					</div>
				</c:forEach>





				<div class="load-more">
					<a class="btn-6" href="#">更多</a>
				</div>
			</div>
		</div>
	</section>
	<!---End-NewArrivals-Section-->
	<!---Start-Deal-Offer-Section-->
	<!--  11111111111111111111111111111111111111111111111111111111111-->
	<!---Start-Deal-Offer-Section-->

	<!---End-Deal-Offer-Section-->
	<!---Start-Blog-Section-->
	<section class="ws-section-spacing blog-bg">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<h3 class="title">观赏我们的故事</h3>
					<div class="saprater title-bottom-spacing">
						<ul>
							<li class="saprater-box"></li>
							<li class="saprater-box"></li>
							<li class="saprater-box"></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="row">
				<!--item-->
				<div class="col-lg-4 col-md-6 col-sm-12">
					<div class="blog-card">
						<div class="blog-img">
							<img src="images/blog-1.jpg" alt=""> <span class="date">16
								October 2019</span>
						</div>
						<ul class="meta-tag">
							<li><a href="#">By Admin</a></li>
							<li><a href="#">Comment (15)</a></li>
							<li><a href="#">Likes (25)</a></li>
						</ul>
						<div class="blog-content">
							<h3>
								<a href="#">Combined with a handful of model in fashion.</a>
							</h3>
							<p>Lorem ipsum dolor sit ameconsecte tur ing elit, sed do
								eiusmod tempor inc ididunt ut re et dolore magna dolore.</p>
						</div>
						<a href="#" class="blog-btn">Read More</a>
					</div>
				</div>
				<!--item-->
				<div class="col-lg-4 col-md-6 col-sm-12">
					<div class="blog-card">
						<div class="blog-img">
							<img src="images/blog-2.jpg" alt=""> <span class="date">12
								October 2019</span>
						</div>
						<ul class="meta-tag">
							<li><a href="#">By Admin</a></li>
							<li><a href="#">Comment (15)</a></li>
							<li><a href="#">Likes (25)</a></li>
						</ul>
						<div class="blog-content">
							<h3>
								<a href="#">Combined with a handful of model in fashion.</a>
							</h3>
							<p>Lorem ipsum dolor sit ameconsecte tur ing elit, sed do
								eiusmod tempor inc ididunt ut re et dolore magna dolore.</p>
						</div>
						<a href="#" class="blog-btn">Read More</a>
					</div>
				</div>
				<!--item-->
				<div class="col-lg-4 col-md-6 col-sm-12">
					<div class="blog-card">
						<div class="blog-img">
							<img src="images/blog-3.jpg" alt=""> <span class="date">08
								October 2019</span>
						</div>
						<ul class="meta-tag">
							<li><a href="#">By Admin</a></li>
							<li><a href="#">Comment (15)</a></li>
							<li><a href="#">Likes (25)</a></li>
						</ul>
						<div class="blog-content">
							<h3>
								<a href="#">Combined with a handful of model in fashion.</a>
							</h3>
							<p>Lorem ipsum dolor sit ameconsecte tur ing elit, sed do
								eiusmod tempor inc ididunt ut re et dolore magna dolore.</p>
						</div>
						<a href="#" class="blog-btn">Read More</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!---End-Blog-Section-->
	<!---Start-Pertner-Section-->
	<section class="ws-section-spacing patner-bg">
		<div class="container">
			<div class="row justify-content-center">
				<div class="client-Slider">
					<div class="client">
						<img src="images/client-1.png" alt="">
					</div>
					<!--item-->
					<div class="client">
						<img src="images/client-2.png" alt="">
					</div>
					<!--item-->
					<div class="client">
						<img src="images/client-3.png" alt="">
					</div>
					<!--item-->
					<div class="client">
						<img src="images/client-4.png" alt="">
					</div>
					<!--item-->
					<div class="client">
						<img src="images/client-4.png" alt="">
					</div>
				</div>
			</div>
		</div>
	</section>
	<!---End-Pertner-Section-->
	<!---Start-Footer-Section-->
	<footer class="same-section-spacing footer-bg">
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-4">
					<div class="footer-about">
						<img src="images/logo-wht.png" alt="">
						<p>Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit.
							Aenean com modo ligula eget dolor. Aenean ma ssa. Cum sociis</p>
					</div>
				</div>
				<!--item-->
				<div class="col-lg-3 col-md-4">
					<div class="popular-tag">
						<h4 class="footer-title">Populer Tags</h4>
						<ul>
							<li><a href="#">Fashion</a></li>
							<li><a href="#">T-Shirts</a></li>
							<li><a href="#">Women</a></li>
							<li><a href="#">Men</a></li>
							<li class="active"><a href="#">Jeans</a></li>
							<li><a href="#">Modern</a></li>
							<li><a href="#">Shirts</a></li>
							<li><a href="#">Classic</a></li>
							<li><a href="#">Shoes</a></li>
							<li><a href="#">Running</a></li>
						</ul>
					</div>
				</div>
				<!--item-->
				<div class="col-lg-3 col-md-4">
					<div class="contact-us">
						<h4 class="footer-title">Contact-Us</h4>
						<ul>
							<li><i class="fas fa-map-marker-alt"></i> 180-A Apolo apart,
								Front of pell Junction,</li>
							<li><i class="fas fa-phone-alt"></i>(+91) 1234567890</li>
							<li><i class="fas fa-envelope"></i> info@companyname.com</li>
						</ul>
					</div>
				</div>
				<!--item-->
				<div class="col-lg-3 col-md-4">
					<div class="contact-us">
						<h4 class="footer-title">Contact-Us</h4>
						<p>Sign up the newsletter</p>
						<input type="email" name="email" placeholder="Email" required=""
							class="email">
						<button type="submit" class="contact-btn">Post Comment</button>
					</div>
				</div>
				<!--copy-right-->
				<div class="container">
					<div class="row justify-content-center">
						<div class="container-fluid">
							<div class="copy-right">
								<span class="copy-right-seprater"></span>
								<p>2019 . All Rights Reserved Developed By Company Name.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<!-- Jquery.min.js-->
	<script src="js/jquery-3.3.1.slim.min.js"></script>
	<script src="js/jquery.1.12.4.js"></script>
	<!--bootstrap.min.js-->
	<script src="js/bootstrap.min.js"></script>
	<!--slicknav.min.js-->
	<script src="js/jquery.slicknav.min.js"></script>
	<!--slickslider.min.js-->
	<script src="js/slick.min.js"></script>
	<!-- waypoint.min.js -->
	<script src="js/waypoints.min.js"></script>
	<!--lity.js -->
	<script src="js/lity.min.js"></script>
	<!-- imagesloaded.js -->
	<script src="js/imagesloaded.js"></script>
	<!-- wow.js -->
	<script src="js/wow.min.js"></script>
	<!-- main.js -->
	<script src="js/main.js"></script>
</body>

</html>